<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <title>CKEditor Sample</title>
    <!--  <script type="text/javascript" src="https://apps.bdimg.com/libs/jquery/1.9.0/jquery.js"></script> -->
    <script type="text/javascript" src="http://bbs.xmfish.com/apps/rt/www/js/jquery.xmfish.17.08.min.js"></script>
    <script src="./ckeditor.js"></script>
    <script type="text/javascript" src="./js/plupload/moxie.min.js"></script>
    <script type="text/javascript" src="./js/plupload/plupload.dev.js"></script>
    <script type="text/javascript" src="./js/layer/layer.js"></script>
    <script type="text/javascript" src="./js/tab.js"></script>
    <script type="text/javascript" src="./js/at/js/jquery.atwho.js"></script>
    <link rel="stylesheet" type="text/css" href="./js/at/css/jquery.atwho.css">
    <link rel="stylesheet" type="text/css" href="./css/base.css" />
    <link rel="stylesheet" type="text/css" href="./css/plugin.css">
    <style type="text/css">
    .cke_toolbox .cke_toolbar:last-child>.cke_toolgroup>a:after {
        display: none;
    }

    #cke_editor .cke_button_label {}
    </style>
</head>

<body style="padding: 150px 150px;">
    <div>
        <p>1、对于图片上传进行了优化，图片修改进行优化(双击进行编辑)</p>
        <p>2、插入iframe表单进行优化(由于https与http问题暂时无法看见)</p>
        <p>3、整合常用的功能</p>
    </div>
    <div id="editor">
        <img src="./images/demo/01.jpg" width="200" />
        <p id="x22">foo<b>barcccccc</b>sadafasdfasdfasdfasdf ^</p>
        <p id="x11"><a href="https://wwww.baidu.com?id=20&age=30" id="x1">链接</a></p>
        <p id="x2"><a href="http://wwww.baidu.com" target="_self">链接2</a></p>
        <div class="simplebox">
            <h2 class="simplebox-title">Title</h2>
            <div class="simplebox-content">
                <p>Content...</p>
            </div>
        </div>
    </div>
    <!--   <iframe class="iframe-box" frameborder="none" width="500" height="600" src="http://www.xiaoyu.com/enroll?app_id=2559"></iframe> -->
    <button id="x1" style="">点击</button>
    <button id="btn-get-content">获取内容</button>
    <button id="btn-get-selectcontent">获取选中内容</button>
    <script>
    var editor = CKEDITOR.replace('editor', {
        height: 500,
        /*enterMode:2,*/
        /**
         * simplebox
         */
        extraPlugins: 'imagesingle,imagegallery,iframebox,tablebox,link,smileybox',
        allowedContent: true,

        // allowedContentRules:"p h1(left,right)",
        plupload: {

            inputHidden: false,
            galleryListUrl: "https://wnworld.com/api/plupload/lazyload.php", //获取相册列表url
            galleryClassifyUrl:"https://wnworld.com/api/plupload/gallerytype.php",
            url: 'https://wnworld.com/api/plupload/upload.php', //文件上传url
            flash_swf_url: './js/plupload/Moxie.swf',
            silverlight_xap_url: './js/plupload/Moxie.xap',
            filters: {
                max_file_count: 2
            },
            multipart_params: { //文件上传附带参数
                uid: 10
            },
            initLoad: function(up) {
                function setOption(k, v) {
                    var params = up.getOption("multipart_params");
                    params[k] = v;
                    up.setOption("multipart_params", params);
                }

                up.$dialog.find(".ft-save-checkbox input").on("change", function() {
                    var $this = $(this);
                    var $sel = up.$dialog.find(".ft-gallery-sel");
                    if ($this.prop('checked')) {
                        $sel.removeAttr('disabled');
                        setOption("ablum", $sel.val());
                    } else {
                        $sel.attr('disabled', 'disabled');
                        setOption("ablum", null);
                    }
                });

                up.$dialog.find(".ft-gallery-sel").on("change", function() {
                    setOption("ablum", $(this).val());
                });
            },
            //每个文件上传成功毁掉函数
            fileUploaded: function(up, file) {
                file.$inputHidden.val("asdfasdfasdfasdfasdf");
            },
            //plupload 执行全部的上传事件后触发该函数，只触发一次
            uploadComplete: function(up, files) {

            }
        },

        imageSingle: {
            plupload: {
                url: 'upload.php',
                multipart_params: {}, //用户id和帖子id 等额外参数
                filters: {
                    max_imgfile_count: 3,
                    prevent_duplicates: true,
                    max_file_size: '50mb',
                    mime_types: [
                        { title: "Image files", extensions: "jpg,jpeg,gif,png" }
                    ]
                }
            }
        },
    });

    var names = [{ name: "x1", url: "www.baidu.com" }, { name: "x2", url: "www.baidu.com" }, { name: "x3", url: "www.baidu.com" }, { name: "x4", url: "www.baidu.com" }];

    var at_config = {
        at: "@",
        data: names,
        limit: 20,
        insertTpl: "<a href='#{url}'>#{atwho-at}#{name}</a>",
        displayTpl: "<li data-value='@#{name}' data-url='#{url}'>#{name}</li>"
    }

    // Bind to every CKEditor instance that'll load in the future
    CKEDITOR.on('instanceReady', function(event) {

        var editor = event.editor;
        // Switching from and to source mode
        // 远吗切换的时候触发这个事件  两个值 source 和 wysiwyg
        editor.on('mode', function(e) {
            load_atwho(this, at_config);
        });

        // First load
        load_atwho(editor, at_config);

    });

    function load_atwho(editor, at_config) {

        // WYSIWYG mode when switching from source mode
        if (editor.mode != 'source') {

            // editor.document.getBody().$.contentEditable = true;

            $(editor.document.getBody().$)
                .atwho('setIframe', editor.window.getFrame().$)
                .atwho(at_config);

        }
        // Source mode when switching from WYSIWYG
        else {
            $(editor.container.$).find(".cke_source").atwho(at_config);
        }

    }



    //页面上面
















    // var tpl = new CKEDITOR.template( '<div class="{cls}">{label}</div>' );
    // alert( tpl.output( { cls: 'cke-label', label: 'foo'} ) );







    $(function() {
        $("#btn-get-content").on("click", function() {
            alert(editor.getData())
            // alert(editor.getSelection().getSelectedText())
        });

        $("#btn-get-selectcontent").on("click", function() {
            console.dir(editor.getSelection())
        })
    })
    </script>
</body>

</html>